<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<link rel="stylesheet" href="../css/examples-offline.css">
<link rel="stylesheet" href="../css/kendo.common.min.css">
<link rel="stylesheet" href="../css/kendo.default.min.css">
<script src="../script/jquery-1.8.2.min.js"></script>
<script src="../script/kendo.web.min.js"></script>
<style type="text/css">
#vertical {
	height: 700px;
	width: 700px;
	margin: 0 auto;
}
 
#middle-pane {
	background-color: rgba(60, 70, 80, 0.10);
}

#bottom-pane {
	background-color: rgba(60, 70, 80, 0.15);
}

#left-pane {
	background-color: rgba(60, 70, 80, 0.05);
}

#center-pane {
	background-color: rgba(60, 70, 80, 0.05);
}

#right-pane {
	background-color: rgba(60, 70, 80, 0.05);
}

.pane-content {
	padding: 0 10px;
}
</style>
<script>
	$(document).ready(function() {

		$("#vertical").kendoSplitter({
			orientation : "vertical",
			panes : [ {
				collapsible : false
			}, {
				collapsible : false,
				size : "100px"
			}, {
				collapsible : false,
				resizable : false,
				size : "100px"
			} ]
		});

		$("#horizontal").kendoSplitter({
			panes : [ {
				collapsible : true,
				size : "220px"
			}, {
				collapsible : false
			}, {
				collapsible : true,
				size : "220px"
			} ]
		});
	});
</script>

</head>
<body>

		<div id="vertical">
			<div id="top-pane">
				<div class="pane-content">
					<h3>Inner splitter / center pane</h3>
					<p>Resizable only.</p>
				</div>
			</div>
			<div id="center-pane">
				<div id="horizontal" style="height: 100%; width: 100%;">
					<div id="left-pane">
						<div class="pane-content">
							<h3>Inner splitter / left pane</h3>
							<p>Resizable and collapsible.</p>
						</div>
					</div>

					<div id="right-pane">
						<div class="pane-content">
							<h3>Inner splitter / right pane</h3>
							<p>Resizable and collapsible.</p>
						</div>
					</div>
				</div>
			</div>
			<div id="middle-pane">
				<div class="pane-content">
					<h3>Outer splitter / middle pane</h3>
					<p>Resizable only.</p>
				</div>
			</div>
			<div id="bottom-pane">
				<div class="pane-content">
					<h3>Outer splitter / bottom pane</h3>
					<p>Non-resizable and non-collapsible.</p>
				</div>
			</div>
		</div>

</body>
</html>
